<template>
  <div class="dashboard-container">
    <h2>仪表盘</h2>
    <div class="stats-cards">
      <div class="stat-card">
        <h3>总活动数</h3>
        <p class="stat-number">128</p>
      </div>
      <div class="stat-card">
        <h3>进行中活动</h3>
        <p class="stat-number">42</p>
      </div>
      <div class="stat-card">
        <h3>用户总数</h3>
        <p class="stat-number">2,547</p>
      </div>
      <div class="stat-card">
        <h3>今日新增</h3>
        <p class="stat-number">16</p>
      </div>
    </div>
    <div class="recent-activity">
      <h3>最近活动</h3>
      <table>
        <thead>
          <tr>
            <th>活动名称</th>
            <th>开始时间</th>
            <th>状态</th>
            <th>参与人数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="activity in recentActivities" :key="activity.id">
            <td>{{ activity.name }}</td>
            <td>{{ activity.date }}</td>
            <td><span :class="['status', activity.status]">{{ activity.statusText }}</span></td>
            <td>{{ activity.participants }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  setup() {
    // 模拟数据
    const recentActivities = [
      { id: 1, name: '年度技术峰会', date: '2024-05-15', status: 'ongoing', statusText: '进行中', participants: 156 },
      { id: 2, name: '产品发布会', date: '2024-05-12', status: 'upcoming', statusText: '即将开始', participants: 89 },
      { id: 3, name: '用户交流会', date: '2024-05-10', status: 'completed', statusText: '已结束', participants: 203 },
      { id: 4, name: '开发者大会', date: '2024-05-08', status: 'completed', statusText: '已结束', participants: 287 }
    ]

    return {
      recentActivities
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

h2 {
  margin-bottom: 24px;
  color: #333;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 400;
}

.stat-number {
  font-size: 32px;
  font-weight: 600;
  color: #1890ff;
  margin: 0;
}

.recent-activity {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.recent-activity h3 {
  margin-bottom: 16px;
  color: #333;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

th {
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

td {
  font-size: 14px;
  color: #333;
}

.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.ongoing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status.upcoming {
  background-color: #f6ffed;
  color: #52c41a;
}

.status.completed {
  background-color: #f5f5f5;
  color: #999;
}
</style>